<template>
  <div class="section">
    <Tabs value="dbs">
      <TabPane label="数据库服务器" name="dbs">
        <Row v-for="(grp, index) of dbGroup" :key="'dbs' + index">
          <Col :span="dbRowNumber" v-for="(item, cIndex) of grp" :key="'dbs:' + index + '/' + cIndex">
            <db-server :name="item.display" :dbIndex="index * 4 + cIndex" :dbType="item.type" />
          </Col>
        </Row>
      </TabPane>
    </Tabs>
    <!-- <Tabs value="ecs">
      <TabPane label="华为弹性云服务器" name="ecs">
        <Row v-for="(grp, index) of this.ecsGroup" :key="'ecs'+index">
          <Col v-for="(item, cIndex) of grp" :span="ecsRowNumber" :key="'ecs:'+index+'/'+cIndex">
            <ecs :detail="item" />
          </Col>
        </Row>
      </TabPane>
    </Tabs> -->
  </div>
</template>

<script>
// 数据库服务分行每行显示数量
const DBGroupNumber = 4;

// 弹性云服务器分行每行显示数量
const ECSGroupNumber = 4;

export default {
  components: {
    ecs: () => import('./hwcloud/components/ECSInfo.vue'),
    'db-server': () => import('./db/components/ServerInfo.vue')
  },
  data() {
    return {
      dbServers: [],
      ecsServers: []
    };
  },
  computed: {
    dbRowNumber() {
      if(this.$isMobile){
        return 24;
      }

      return parseInt(24 / DBGroupNumber);
    },
    ecsRowNumber() {
      if(this.$isMobile){
        return 24;
      }

      return parseInt(24 / ECSGroupNumber);
    },
    dbGroup() {
      if (this.dbServers && this.dbServers.length > 0) {
        let index = 0;
        let grp = [];

        for (let db of this.dbServers) {
          let grpIndex = parseInt(index / DBGroupNumber);

          if (!grp[grpIndex]) {
            grp[grpIndex] = [];
          }

          grp[grpIndex].push(db);

          index++;
        }

        return grp;
      }

      return [];
    },
    ecsGroup() {
      if (this.ecsServers && this.ecsServers.length > 0) {
        let index = 0;
        let grp = [];

        for (let ecs of this.ecsServers) {
          let grpIndex = parseInt(index / ECSGroupNumber);

          if (!grp[grpIndex]) {
            grp[grpIndex] = [];
          }

          grp[grpIndex].push(ecs);

          index++;
        }

        return grp;
      }

      return [];
    }
  },
  mounted() {
    // 获取MySQL服务列表
    this.$http.get('/api/mysql/servers').then(res => {
      this.dbServers = res;
    });

    // 获取华为云弹性服务器列表
    // this.$http.get("/api/hwcloud/servers").then(res => {
    //   this.ecsServers = res.servers;
    // });
  }
};
</script>
<style lang="less" scoped>
.ivu-row {
  .ivu-card {
    margin-right: 10px;
  }

  .ivu-col {
    &:last-of-type {
      .ivu-card {
        margin-right: 0;
      }
    }

    &:first-of-type {
      .ivu-card {
        margin-right: 10px;
      }
    }
  }
}
</style>
